<template>
  <div class="login">
    <div class="flex-between-start login-container">
      <div class="login-description">
        <div class="login-keywords">
          <div>潮流玩法，不断更新</div>
          <div>流量推广，全面整合</div>
          <div>媒体大咖，一键合作</div>
          <div>线上线下，轻松玩转</div>
        </div>
        <div class="login-solgan">
          营加重新定义您的生意
        </div>
      </div>
      <div class="flex-between-center flex-direction-column login-wrap">
        <div class="login-form-wrap">
          <div class="login-legend">
            {{ $t('login.welcome') }}
          </div>
          <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules">
            <a-form-model-item prop="account">
              <a-input
                v-model="ruleForm.account"
                :placeholder="$t('login.please') + $t('global.account')"
              >
                <a-icon
                  slot="prefix"
                  type="user"
                  style="color: #999;font-size:24px;"
                />
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="password">
              <a-input
                v-model="ruleForm.password"
                type="password"
                :placeholder="$t('login.please') + $t('global.password')"
              >
                <a-icon
                  slot="prefix"
                  type="lock"
                  style="color: #999;font-size:24px;"
                />
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <div class="flex-between-center">
                <a-checkbox v-model="remember">
                  {{ $t('login.remember') }}
                </a-checkbox>
                <nuxt-link class="login-form-forgot" to="/forget">
                  {{ $t('login.forget') }}
                </nuxt-link>
              </div>
            </a-form-model-item>
            <a-button
              block
              shape="round"
              size="large"
              type="primary"
              html-type="submit"
              :loading="loading"
              class="login-form-button"
              @click="validateSubmit()"
            >
              {{ $t('global.login') }}
            </a-button>
          </a-form-model>
        </div>
        <div style="font-size:16px">
          {{ $t('login.noAccount') }}
          <nuxt-link to="/register">
            {{ $t('global.free') }}{{ $t('global.register') }} >
          </nuxt-link>
        </div>
      </div>
    </div>
    <div class="logo">
      <img src="~/assets/images/logo.png" />
    </div>
  </div>
</template>

<script>
import { setStore, getStore, removeStore, removeSession } from '@/utils/storage'
import Copyright from '@/components/The/Copyright'
import clonedeep from 'lodash.clonedeep'
import md5 from 'md5'
export default {
  name: 'Login',
  components: {
    Copyright
  },
  data() {
    return {
      loading: false,
      remember: true,
      ruleForm: {
        account: '',
        password: ''
      },
      // 验证
      rules: {
        // 账号
        account: [
          {
            required: true,
            message: this.$t('login.please') + this.$t('global.account'),
            trigger: 'blur'
          }
        ],
        // 密码
        password: [
          {
            required: true,
            message: this.$t('login.please') + this.$t('global.password'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  beforeCreate() {
    // this.form = this.$form.createForm(this, { name: 'normal_login' })
  },
  created() {
    const account = getStore('account')
    const password = getStore('password')
    console.log(account)
    if (account && password) {
      this.ruleForm = {
        account,
        password
      }
    }
  },
  methods: {
    validateSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.submit()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    async submit() {
      this.loading = true
      const ruleForm = clonedeep(this.ruleForm)
      if (ruleForm.password) {
        ruleForm.password = md5(ruleForm.password)
      }
      const { data, code } = await this.$api.user.login(ruleForm)
      if (code === 1) {
        removeSession('mpVersionUpdateDialogShow')
        const userId = getStore('userId') * 1
        if (userId !== data.user_info.id) {
          removeStore('store_id')
        }
        // this.$store.commit('user/SET_USERINFO', data.user_info)
        // this.$store.commit('user/SET_STORES', data.store_info)
        // this.$store.commit('user/SET_STORE', data.store_info[0])

        if (this.remember) {
          setStore('account', this.ruleForm.account)
          setStore('password', this.ruleForm.password)
        } else {
          removeStore('account')
          removeStore('password')
        }
        setStore('token', data.user_info.token)
        setStore('userId', data.user_info.id)
        if (data.user_info.app_status !== 1) {
          this.$notification.error({ message: '您的账号已被冻结！' })
        }
        await this.$store.dispatch('user/getUserInfo', { $api: this.$api })
        await this.$store.dispatch('menus/getAppMenus', { $api: this.$api })
        this.loading = false
        if (data.register_step_one && data.register_step_one.is_jump) {
          this.$router.replace('/guide')
        } else {
          setStore('dashboardfrom', 'login')
          this.$router.replace({ name: 'Dashboard' })
        }
      } else {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  height: 100vh;
  padding-bottom: 40px;
  background: url('~@/assets/images/login-bg.jpg') no-repeat center center;
}
.logo {
  position: absolute;
  top: 37px;
  left: 60px;
}
.login-container {
  width: 1224px;
  height: 620px;
  background-color: rgba(145, 167, 195, 0.34);
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -310px;
  margin-left: -612px;
}

.login-description {
  text-align: center;
  flex-grow: 1;
  padding-top: 130px;
}

.login-keywords {
  color: white;
  font-size: 18px;
  margin-bottom: 104px;
  > div {
    margin-bottom: 33px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
.login-solgan {
  font-size: 20px;
  color: #ffbf27;
}
.login-wrap {
  padding: 62px 0;
  background-color: #fff;
  width: 544px;
  height: 100%;
}
.login-legend {
  display: inline-block;
  margin-bottom: 64px;
  position: relative;
  font-size: 26px;
  &::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 60px;
    height: 6px;
    border-radius: 3px;
    background-color: @primary-color;
    transform: translate(-50%, 10px);
  }
}
.login-form-wrap {
  width: 360px;
}
.login-form-button {
  margin-top: 60px;
}
/deep/ .ant-input {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  font-size: 16px;
  padding-left: 40px !important;
  padding-top: 22px;
  padding-bottom: 22px;
}
/deep/ .ant-input:focus {
  box-shadow: none;
}
/deep/ .ant-input-prefix {
  left: 0;
}
</style>
